<template>
	<view class="container">
		<view class="training-history">
			<text class="section-title">训练记录</text>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in trainingHistory" :key="index">
					<view class="history-date">{{item.date}}</view>
					<view class="history-info">
						<text class="history-name">{{item.name}}</text>
						<text class="history-duration">{{item.duration}}</text>
					</view>
					<view class="history-count">{{item.count}}次</view>
				</view>
			</view>
		</view>
		
		<view class="training-stats">
			<text class="section-title">训练统计</text>
			<view class="stats-cards">
				<view class="stats-card">
					<text class="stats-value">12</text>
					<text class="stats-label">总训练次数</text>
				</view>
				<view class="stats-card">
					<text class="stats-value">120</text>
					<text class="stats-label">总收缩次数</text>
				</view>
				<view class="stats-card">
					<text class="stats-value">85分钟</text>
					<text class="stats-label">总训练时长</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trainingHistory: [
					{ date: '2023-05-15', name: '初练者硬度提升', duration: '5分钟', count: 30 },
					{ date: '2023-05-14', name: '进阶者持久训练', duration: '10分钟', count: 60 },
					{ date: '2023-05-12', name: '初练者硬度提升', duration: '5分钟', count: 30 }
				]
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 15px;
}

/* 训练页样式 */
.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 15px;
	display: block;
	position: relative;
	padding-left: 12px;
	
	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 2px;
		height: 16px;
		width: 4px;
		background: linear-gradient(to bottom, #FFD700, #FFA500);
		border-radius: 2px;
	}
}

.history-list {
	margin-bottom: 25px;
	
	.history-item {
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		box-shadow: 0 1px 5px rgba(0,0,0,0.05);
		
		.history-date {
			font-size: 12px;
			color: #999;
			width: 70px;
		}
		
		.history-info {
			flex: 1;
			
			.history-name {
				font-size: 14px;
				color: #333;
				display: block;
				font-weight: 500;
			}
			
			.history-duration {
				font-size: 12px;
				color: #666;
			}
		}
		
		.history-count {
			font-size: 16px;
			font-weight: bold;
			color: #FFD700;
		}
	}
}

.stats-cards {
	display: flex;
	justify-content: space-between;
	
	.stats-card {
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		width: 31%;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		
		.stats-value {
			font-size: 20px;
			font-weight: bold;
			color: #FFD700;
			display: block;
			margin-bottom: 5px;
		}
		
		.stats-label {
			font-size: 12px;
			color: #666;
		}
	}
}
</style> 